<template>
	<view class="search">
		<js-search-bar history v-model="keyword" isClear @clear="keyword = ''" @search="search"></js-search-bar>
		<u-transition :show="true">
			<view class="container">
				<view class="section" v-for="(item, i) in sections" :key="i">
					<view class="tbox">
						<text>{{ item.title }}</text>
						<view class="iconbox" :class="{ loading: Active(item) }" @click="handleActive(item)">
							<u-icon :name="item.icon" color="#000"></u-icon>
						</view>
					</view>
					<view class="cbox">
						<view class="item" v-for="(val, key) in list[i]" @click="goSearch(val)" :key="key">
							<text>{{ val.title || val }}</text>
						</view>
					</view>
				</view>
			</view>
		</u-transition>
	</view>
</template>

<script>
import API from '@/common/api';
import { mapState } from 'vuex';

export default {
	name: 'search',
	computed: {
		...mapState(['config']),
		Active() {
			return (item) => {
				if (item.icon === 'reload') {
					return this.loading;
				}
			};
		}
	},
	data() {
		return {
			sections: [
				{ title: '热门搜索', icon: 'reload' },
				{ title: '搜索历史', icon: 'trash' }
			],
			list: [[], []],
			keyword: '',
			loading: false,
			paging: {
				i: 0,
				page: 1,
				pagenum: 10
			},
			order1: 'orders'
		};
	},
	onLoad() {},
	onShow() {
		this.getHots();
		this.init();
	},

	methods: {
		goSearch(val) {
			this.keyword = val.title || val;
			this.toNav(`search/result?keyword=${this.keyword}`);
		},
		search(e) {
			this.toNav(`search/result?keyword=${this.keyword}`);
		},
		init() {
			let searchRecord = uni.getStorageSync('searchRecord');
			this.$set(this.list, 1, searchRecord);
		},

		getHots() {
			this.loading = true;
			if (this.config.reci.length === 0) {
				return;
			}

			function splitArray(array, chunkSize) {
				var result = [];
				for (var i = 0; i < array.length; i += chunkSize) {
					var chunk = array.slice(i, i + chunkSize);
					result.push(chunk);
				}
				return result;
			}
			let list = splitArray(this.config.reci, 10);
			let count = list.length;
			let arr = [];
			arr = list[this.paging.i];
			this.paging.i += 1;
			if (this.paging.i < count) {
				this.$set(this.list, 0, arr);
			} else {
				this.paging.i = 0;
				this.$set(this.list, 0, arr);
			}
			setTimeout(() => {
				this.loading = false;
			}, 500);
		},
		handleActive(item) {
			switch (item.icon) {
				case 'reload':
					// 刷新
					this.getHots();
					break;
				case 'trash':
					// 删除
					if (this.list.length > 0) {
						if (this.list[1].length === 0) {
							uni.showToast({
								title: '没有历史记录',
								icon: 'none'
							});
							return;
						}
					}
					this.j_modal(
						'确认删除所有搜索历史吗？',
						() => {
							uni.removeStorageSync('searchRecord');
							this.init();
						},
						true
					);
					break;
				default:
					break;
			}
		}
	}
};
</script>

<style lang="less" scoped>
.search {
	.container {
		padding: 32rpx;
	}
	.loading {
		animation: spin 0.5s infinite;
	}
	@keyframes spin {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}

	.section {
		padding-bottom: 42rpx;
		.cbox {
			display: flex;
			flex-wrap: wrap;
			gap: 16rpx;
			.item {
				.flex-center();
				// width: 160rpx;
				// height: 48rpx;
				padding: 14rpx;
				// margin-right: 32rpx;
				// margin-bottom: 16rpx;
				background: #ffffff;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				.j-active();
				& > text {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}
		}
		.tbox {
			.flex-between();
			padding-bottom: 26rpx;
			& > text {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #000000;
			}
			.iconbox {
				.j-active();
			}
		}
	}
}
</style>
